<script setup>
import { ref } from 'vue';

const model = defineModel()



const value1 = ref(0);
const options1 = [
    { text: 'app订票', value: 0 },
    { text: '前台兑换', value: 1 },
];

const value2 = ref(0);
const options2 = [
    { text: '价格排序', value: 0 },
    { text: '价格升序', value: 1 },
    { text: '价格降序', value: 2 },
];

</script>

<template>

    <van-nav-bar title="影院">
        <template #left>
            <span>全国</span>
            <van-icon name="arrow-down" size="12" color="#191a1b" />
        </template>
        <template #right>
            <van-icon name="search" size="18" />
        </template>
    </van-nav-bar>

    <van-dropdown-menu ref="menuRef" active-color="#ee0a24">

        <van-dropdown-item title="热门" ref="itemRef">
            <div class="hotCity">
                <span @click="model.area='全国'">全国</span>                
                <span @click="model.area='上海'">上海</span>                
                <span @click="model.area='南京'">南京</span>                
            </div>
        </van-dropdown-item>

        <van-dropdown-item v-model="value1" :options="options1" />

        <van-dropdown-item v-model="value2" :options="options2" />

    </van-dropdown-menu>

</template>

<style scoped lang="less">
.hotCity{
    display: flex;
    align-items: center;
    height: 50px;
    font-size: 12px;

    span{
        display: line-block;
        border: 1px solid rgb(184, 172, 172);
        padding:5px 20px;
        margin: 5px;
        color: rgb(127, 130, 134);
        
    }

}

</style>